@coro:pink;
@color1:black;
// 只能以 @ 开头 且 区分大小写 不能有特殊符号
@font14:14px;
// 这个文件html不能直接引入 
// 因为安装了插件easyless 所以保存后会自动生成一个less.css文件

// less里面可以进行运算 加减乘除 但是符号前后都要空格
@border:5px + 5;
.div{
    width: 550px;
    height: 400px;
    background-color: @coro;
    font: @font14;
    // 这是less的嵌套用法 子元素直接写到父元素里面就好
   a{
    color: red;
    &:hover{
        color: #000;
    }
   }
}
.nav {
    .log{
        font: @font14;
       color: green;
    }
    // 如果有伪类和伪元素就加个&符号在前面
    &::after{
        content: '';
    }
}
.ss{
    width: 100px - 20;
    height: 100px * 2;
    border:@border solid black;
}
img{
    // 除法要用括号
    width:(80 / 50rem) ;
    height: (600px/20rem);
}
// 两个数有一个有单位结果就以哪一个为单位
// 如果两个数都有单位就以前面那个数的单位为准